<body>
  <input type="text" id="inp" />
  <button id="btn">提交</button>
  <!-- <script>
    // 1.封装防抖函数
    /*作用： 高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间
      防抖类似于英雄联盟回城6秒，如果回城中被打断，再次回城需要再等6秒*/
    function debounce(fn, time) {
      // 4.创建一个标记用来存放定时器的返回值
      let timeout = null
      return function () {
        const context = this
        // 5.每当用户触发input事件  把前一个 setTimeout 清楚掉
        if (timeout) clearTimeout(timeout)
        // 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话，就不会执行 setTimeout里面的内容
        timeout = setTimeout(() => {
          // 7.这里进行防抖的内容
          fn()
        }, time)
      }
    }

    // 2.获取inpt元素
    var inp = document.getElementById('inp')
    var btn = document.getElementById('btn')
    // 8. 测试防抖临时使用的函数
    function sayHi() {
      console.log('防抖成功')
    }
    console.log(btn)
    // 3.给inp绑定input事件  调用封装的防抖函数  传入要执行的内容与间隔事件
    //  inp.addEventListener('input', debounce(sayHi, 1000));
    btn.addEventListener('click', debounce(sayHi, 3000))

    //  inp.addEventListener('input',sayHi);
  </script> -->
  <script>
    // 1.封装节流函数
    function throttle(fn, time) {
        //3. 通过闭包保存一个 "节流阀" 默认为false
        let temp = false;
        return function () {
            //8.触发事件被调用 判断"节流阀" 是否为true  如果为true就直接trurn出去不做任何操作
            if (temp) {
                return;
            } else {
                //4. 如果节流阀为false  立即将节流阀设置为true
                temp = true; //节流阀设置为true
                //5.  开启定时器
                setTimeout(() => {
                    //6. 将外部传入的函数的执行放在setTimeout中
                    fn.apply(this, arguments);
                    //7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键)  表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true，在开头被return掉
                    temp = false;
                }, time);
            }
        };
    }
    function sayHi(e) {
        // 打印当前 document 的宽高
        console.log(e.target.innerWidth, e.target.innerHeight);
    }
    // 2.绑定事件，绑定时就调用节流函数
    // 敲黑板！！！ 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数
    // window.addEventListener('resize', throttle(sayHi, 1000));
    window.addEventListener(('resize', _.throttle(sayHi, 150)));
  </script>
</body>
